<template>
  <div class="container clearfix">
    <div class="top">
      <img :src="img_url+'/mp_3.0/2@2x.png'"
           v-if="img_url"
           alt=""
           class="img">
    </div>
    <div class="tip">
      订单支付成功
    </div>
    <div class="btn-bar">
      <div class="btn gray"
           @tap.stop="to_order()">查看订单</div>
      <div class="btn red"
           @tap.stop="to_more ()">去逛逛</div>
    </div>
    <!-- 会员卡列表 -->
    <div class="member">
      <div class="title">
        服务推荐
      </div>
      <ul class="list">
        <li class="list-item"
            @tap.stop="to_detail(item)"
            v-for="(item, index) in card_arr"
            :key="index">
          <div class="logo">
            <img :src="base_url+item.image"
                 v-if="base_url"
                 alt=""
                 class="img">
          </div>
          <div class="info">
            <div class="card-name">
              {{item.service_name}}
            </div>
            <div class="dec">
              {{item.service_desc}}
            </div>
            <div class="price clearfix">
              <div class="left">
                <div class="icon">￥</div>{{item.price}}
              </div>
              <div class="right">
                已售{{item.sale_num}}
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import common from '@/assets/js/mmk_common.js'
export default {
  data () {
    return {
      img_url: common.image_resource,
      base_url: common.image_response,
      card_arr: [],
      order_sn: "",
      type: ""
    };
  },
  methods: {
    get_list () {
      common.fly_post(
        'api/v4_2/pay/paySuccess',
        {
          type: this.type == 'plus_order' ? 2 : 1,
          order_sn: this.order_sn
        },
        response => {
          let res = response.data
          if (res.status_code == 0) {
            console.log(res.data);

            this.card_arr = res.data
          } else {
            wx.showToast({
              title: res.message, //提示的内容,
              icon: 'none', //图标,
              duration: 1500, //延迟时间,
              mask: true, //显示透明蒙层，防止触摸穿透,
              success: res => { }
            });
          }
        }
      )
    },
    to_order () {
      switch (this.type) {
        //   会员中心
        case 'plus_order':
          wx.redirectTo({ url: `/pages/package_main/advertisement/main?url=${common.is_online ? 'https://h5.ameimeika.com/mmk_member/#/' : 'https://h5s.ameimeika.com/mmk_member/#/'}` });
          break;
        //   服务订单
        case 'service_order':
          wx.redirectTo({ url: '/pages/package_mine/project_order_list/main' });
          break;

        default:
          break;
      }

    },
    to_more () {
      switch (this.type) {
        //   plus会员
        case 'plus_order':
          wx.reLaunch({ url: '/pages/life_beauty/main' });
          break;
        //   服务订单
        case 'service_order':
          wx.reLaunch({ url: '/pages/life_beauty/main' });
          break;

        default:
          break;
      }
    },
    to_detail (item) {
      let router = encodeURIComponent(`${common.life_beauty}cardInfor?id=` + item.id);
      wx.navigateTo({
        url: `/pages/package_main/advertisement/main?url=${router}`
      });
    },
    getinfo () {
      wx.showLoading({
        title: "加载中", //提示的内容,
        mask: true //显示透明蒙层，防止触摸穿透
      });
      common.fly_post("api/v4_2/my_info_detail", {}, (result) => {
        let res = result.data;
        wx.hideLoading();
        if (res.status_code == 0) {
          wx.setStorageSync("user_data", res.data);
          wx.setStorageSync("is_plus", res.data.is_plus);
          wx.setStorageSync("is_home_plus_entrance", res.data.is_home_plus_entrance);
        } else {
          wx.showToast({
            title: res.message,
            icon: "none",
            duration: 2000,
            mask: true
          });
        }
      })

    },
  },
  onLoad (options) {
    if (options.order_sn) {
      this.order_sn = options.order_sn
      this.type = options.type
    } this.get_list()
  },
  onShow () {
    this.getinfo()
  },
};
</script>

<style lang="less" scoped>
.container {
  background-color: rgba(243, 244, 246, 1);
  height: 100%;
  overflow-y: auto;
  .top {
    margin: 30px auto 0;
    width: 105px;
    height: 105px;
    .img {
      width: 100%;
      height: 100%;
    }
  }
  .tip {
    font-size: 17px;
    font-family: "PingFangSC-Medium", "PingFang SC";
    font-weight: 500;
    color: rgba(68, 68, 68, 1);
    line-height: 24px;
    margin-top: 6px;
    text-align: center;
  }
  .btn-bar {
    width: 250px;
    height: 40px;
    display: flex;
    margin: 27px auto 23px;
    justify-content: space-between;
    .btn {
      width: 105px;
      height: 40px;
      font-size: 14px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      line-height: 40px;
      text-align: center;
      border-radius: 20px;
      &.gray {
        background: rgba(195, 195, 195, 1);
      }
      &.red {
        background: rgba(255, 56, 62, 1);
      }
    }
  }
  .member {
    background-color: #fff;
    .title {
      height: 22px;
      margin: 20px 15px 25px;
      font-size: 16px;
      font-family: "PingFangSC-Medium", "PingFang SC";
      font-weight: 500;
      color: rgba(29, 32, 35, 1);
      line-height: 22px;
      background-image: url(https://img.ameimeika.com/h5_images/mp_images/mp_3.0/indexpage/rectangle@3x.png);
      background-repeat: no-repeat;
      background-size: 100% 5px;
      background-position: bottom center;
      display: inline-block;
    }
    .list {
      .list-item {
        margin: 0 15px;
        padding: 15px 0;
        border-top: 1px solid #f0eded;
        display: flex;
        .logo {
          width: 70px;
          height: 70px;
          .img {
            width: 100%;
            height: 100%;
          }
        }
        .info {
          flex: 1;
          padding-left: 10px;
          .card-name {
            font-size: 14px;
            font-family: "PingFangSC-Medium", "PingFang SC";
            font-weight: 500;
            color: rgba(51, 51, 51, 1);
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .dec {
            font-size: 12px;
            font-family: "PingFangSC-Regular", "PingFang SC";
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            line-height: 17px;
            margin-top: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .price {
            margin-top: 10px;
            .left {
              float: left;
              font-size: 16px;
              font-family: "PingFangSC-Semibold", "PingFang SC";
              font-weight: 600;
              color: rgba(255, 56, 62, 1);
              line-height: 20px;
              .icon {
                font-size: 10px;
                font-family: "PingFangSC-Regular", "PingFang SC";
                font-weight: 400;
                color: rgba(255, 56, 62, 1);
                line-height: 12px;
                display: inline-block;
                vertical-align: bottom;
              }
            }

            .right {
              float: right;
              font-size: 12px;
              font-family: "PingFangSC-Regular", "PingFang SC";
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              line-height: 17px;
              vertical-align: middle;
            }
          }
        }
        &:first-of-type {
          border: none;
        }
      }
    }
  }
}
</style>

